<script setup>
import { ref, computed, onMounted } from 'vue'
import { Search } from '@element-plus/icons-vue'

// 模拟日志数据
const mockLogs = [
    {
        id: 1,
        timestamp: '2024-03-20 14:23:56',
        username: 'user1',
        action: '登录系统',
        level: 'INFO',
        details: '用户从IP 192.168.1.100登录'
    },
    {
        id: 2,
        timestamp: '2024-03-20 14:24:12',
        username: 'admin',
        action: '修改配置',
        level: 'WARNING',
        details: '修改了系统超时时间为30分钟'
    },
    {
        id: 3,
        timestamp: '2024-03-20 14:25:33',
        username: 'user2',
        action: 'ERROR: 权限拒绝',
        level: 'ERROR',
        details: '尝试访问/admin/settings无权限'
    },
    {
        id: 4,
        timestamp: '2024-03-20 14:26:45',
        username: 'user1',
        action: '退出登录',
        level: 'INFO',
        details: '用户正常退出系统'
    },
    // 更多日志...
]

// 响应式数据
const timeRange = ref([])
const logLevels = ref(['INFO', 'WARNING', 'ERROR'])
const searchText = ref('')
const sortOrder = ref('desc')
const currentPage = ref(1)
const pageSize = ref(20)
const detailDialogVisible = ref(false)
const currentDetail = ref({})

const levelOptions = [
    { value: 'INFO', label: 'INFO' },
    { value: 'WARNING', label: 'WARNING' },
    { value: 'ERROR', label: 'ERROR' }
]

// 计算属性
const filteredLogs = computed(() => {
    let logs = [...mockLogs]

    // 按时间范围过滤
    if (timeRange.value && timeRange.value.length === 2) {
        const [start, end] = timeRange.value
        logs = logs.filter(log => {
            const logTime = new Date(log.timestamp).getTime()
            return logTime >= start.getTime() && logTime <= end.getTime()
        })
    }

    // 按日志级别过滤
    if (logLevels.value.length > 0) {
        logs = logs.filter(log => logLevels.value.includes(log.level))
    }

    // 搜索过滤
    if (searchText.value) {
        const search = searchText.value.toLowerCase()
        logs = logs.filter(log =>
            log.username.toLowerCase().includes(search) ||
            log.action.toLowerCase().includes(search)
        )
    }

    // 排序
    logs.sort((a, b) => {
        const timeA = new Date(a.timestamp).getTime()
        const timeB = new Date(b.timestamp).getTime()
        return sortOrder.value === 'asc' ? timeA - timeB : timeB - timeA
    })

    // 分页
    const start = (currentPage.value - 1) * pageSize.value
    const end = start + pageSize.value
    return logs.slice(start, end)
})

const totalLogs = computed(() => {
    return mockLogs.length // 实际应用中应该是过滤后的总数
})

// 方法
const showDetails = (log) => {
    currentDetail.value = log
    detailDialogVisible.value = true
}

const getLevelClass = (level) => {
    return {
        'log-info': level === 'INFO',
        'log-warning': level === 'WARNING',
        'log-error': level === 'ERROR'
    }
}

const getTagType = (level) => {
    switch (level) {
        case 'INFO': return ''
        case 'WARNING': return 'warning'
        case 'ERROR': return 'danger'
        default: return 'info'
    }
}

// 初始化
onMounted(() => {
    // 可以在这里加载真实数据
})
</script>

<template>
    <div class="log-container">
        <el-card class="log-card">
            <template #header>
                <div class="card-header">
                    <span>用户日志系统 v1.0</span>
                </div>
            </template>

            <div class="log-toolbar">
                <!-- 左侧筛选条件 -->
                <div class="filter-section">
                    <el-form :inline="true">
                        <el-form-item label="时间范围">
                            <el-date-picker v-model="timeRange" type="datetimerange" range-separator="至"
                                start-placeholder="开始时间" end-placeholder="结束时间" />
                        </el-form-item>

                        <el-form-item label="日志级别">
                            <el-select v-model="logLevels" multiple placeholder="请选择">
                                <el-option v-for="level in levelOptions" :key="level.value" :label="level.label"
                                    :value="level.value" />
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>

                <!-- 右侧搜索和排序 -->
                <div class="action-section">
                    <el-input v-model="searchText" placeholder="搜索日志内容" class="search-input" clearable>
                        <template #prefix>
                            <el-icon>
                                <search />
                            </el-icon>
                        </template>
                    </el-input>

                    <div class="sort-section">
                        <span>排序方式: </span>
                        <el-radio-group v-model="sortOrder">
                            <el-radio-button label="asc">时间升序</el-radio-button>
                            <el-radio-button label="desc">时间降序</el-radio-button>
                        </el-radio-group>
                    </div>
                </div>
            </div>

            <!-- 日志表格 -->
            <el-table :data="filteredLogs" border style="width: 100%" class="log-table">
                <el-table-column prop="timestamp" label="时间" width="180" sortable />
                <el-table-column prop="username" label="用户" width="120" />
                <el-table-column prop="action" label="操作">
                    <template #default="{ row }">
                        <span :class="getLevelClass(row.level)">{{ row.action }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="详情" width="80">
                    <template #default="{ row }">
                        <el-button v-if="row.details" type="text" @click="showDetails(row)">
                            查看
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="totalLogs"
                    :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" />
            </div>
        </el-card>

        <!-- 日志详情对话框 -->
        <el-dialog v-model="detailDialogVisible" title="日志详情" width="50%">
            <div class="log-detail">
                <p><strong>时间:</strong> {{ currentDetail.timestamp }}</p>
                <p><strong>用户:</strong> {{ currentDetail.username }}</p>
                <p><strong>级别:</strong>
                    <el-tag :type="getTagType(currentDetail.level)">
                        {{ currentDetail.level }}
                    </el-tag>
                </p>
                <p><strong>操作:</strong> {{ currentDetail.action }}</p>
                <el-divider />
                <p><strong>详细信息:</strong></p>
                <pre>{{ currentDetail.details }}</pre>
            </div>
        </el-dialog>
    </div>
</template>
  
<style scoped>
.log-container {
    padding: 20px;
}

.log-card {
    min-height: calc(100vh - 40px);
}

.card-header {
    font-size: 18px;
    font-weight: bold;
}

.log-toolbar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.filter-section {
    flex: 1;
}

.action-section {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.search-input {
    width: 250px;
}

.sort-section {
    display: flex;
    align-items: center;
    gap: 10px;
}

.log-table {
    margin-top: 20px;
}

.pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

.log-info {
    color: var(--el-color-info);
}

.log-warning {
    color: var(--el-color-warning);
}

.log-error {
    color: var(--el-color-danger);
}

.log-detail pre {
    background-color: #f5f7fa;
    padding: 10px;
    border-radius: 4px;
    white-space: pre-wrap;
}
</style>